<!-- 推广商品 -->
<template>
	<view class="promotion-goods-wrap">
		<view style="background-color: #fafafa;">
			<view style="display: flex; padding:50rpx">
			<u-input style="flex: 3;" v-model="mobile" type="number" :border="true" maxlength=11 placeholder="请输入下单客户手机号或账户ID" />
			<u-button style="flex: 1;" type="success" @tap="getGoodList">搜索</u-button>
			</view>
		</view>
		<view class="goods-list u-flex" v-for="(item, index) in customerList" :key="item.goods_id" @tap="jump('/pages/goods/detail', { id: item.id })">
			<view class="img-box"><image class="goods-img" :src="item.avatar" mode=""></image></view>
			<view class="goods-info u-flex-col u-row-between">
				<view class="goods-title u-ellipsis-1">手机号：{{ item.mobile }}</view>
				<view class="goods-des u-ellipsis-1">名称：{{ item.nickname }}</view>				
			</view>
			<button class="share-btn u-reset-button" @tap.stop="select(item.id)">选择</button>
		</view>

		<!-- 缺省页 -->
		<shopro-empty v-show="isEmpty" :image="$IMG_URL + '/imgs/empty/no_data.png'" tipText="暂无数据"></shopro-empty>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			mobile: '',
			showShare: false, //是否分享
			posterInfo: {}, //分享信息
			customerList: [], //分销商品
			loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			currentPage: 1,
			lastPage: 1,
			isEmpty: false
		};
	},
	computed: {},
	onLoad() {},
	onReachBottom() {
		if (this.currentPage < this.lastPage) {
			this.currentPage += 1;
			this.getGoodList();
		}
	},
	methods: {
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas
			});
		},
		getGoodList() {
			let that = this;
			that.loadStatus = 'loading';
			that.$http('agent.customer', {
				mobile: that.mobile
			}).then(res => {
				if (res.code === 1) {
					that.customerList = [res.data];
				}else{
					that.customerList = [];
				}
			});
		},
		select(customer_id){			
			let it = this.customerList.find((it)=>{
				return it.id == customer_id;				
			});			
			if(!it.mobile){
				uni.showToast({
					icon: 'none',
					title: '对方账号未绑定手机号'
				});
			}else{
				this.jump('/pages/goods/store', {customer_id: customer_id});
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
// 推广商品列表
.goods-list {
	padding: 30rpx;
	border-bottom: 1rpx solid rgba(#dfdfdf, 0.5);
	position: relative;
	.share-btn {
		position: absolute;
		bottom: 30rpx;
		right: 30rpx;
		width: 160rpx;
		line-height: 60rpx;
		background: linear-gradient(90deg, #a36fff, #5336ff);
		box-shadow: 0px 7rpx 11rpx 2rpx rgba(124, 103, 214, 0.34);
		border-radius: 30rpx;
		font-size: 28rpx;
		color: #fff;
		font-weight: 500;
	}
	.img-box {
		border: 1rpx solid rgba(223, 223, 223, 0.43);
		margin-right: 30rpx;
		.goods-img {
			width: 150rpx;
			height: 150rpx;
		}
	}
	.goods-info {
		align-items: flex-start;
		height: 130rpx;

		.goods-title {
			width: 400rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			margin-bottom: 10rpx;
		}
		.goods-des {
			width: 400rpx;
			font-size: 22rpx;
			font-weight: 500;
			color: #a8700d;
			margin-bottom: 10rpx;
		}
		.goods-price {
			margin-bottom: 10rpx;
			.price {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				margin-right: 16rpx;
			}
			.origin-price {
				font-size: 24rpx;

				font-weight: 400;
				text-decoration: line-through;
				color: #999999;
			}
		}
		.commission-num {
			font-size: 24rpx;
			font-weight: 500;
			color: #5e4ddf;
		}
	}
}
</style>
